<template>
    <div>
        <el-row>
            <el-col :span="8">
                <div class="nav">客户合约合同</div>
            </el-col>
            <el-col :span="16" style="text-align:right;padding-right:30px;padding-top:9px;">
                <button class="button">合同导入</button>
            </el-col>
        </el-row>
        <el-row>
            <div class="content">
                <div class="content-1">
                    <el-row :gutter="10">
                       <el-form ref="form" :model="form">
                           <el-col :span="3">
                               <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="合同开始时间">
                                </el-date-picker>
                           </el-col>
                           <el-col :span="3">
                               <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="合同结束时间">
                                </el-date-picker>
                           </el-col>
                           <el-col :span="2">
                               <el-input placeholder="客户姓名" v-model="form.name"></el-input>
                           </el-col>
                           <el-col :span="8">
                               <el-button>搜索</el-button>
                               <el-button>导出</el-button>
                               <el-button>清空</el-button>
                           </el-col>
                       </el-form>
                    </el-row>
                    <el-row style="margin-top:30px;">
                        <el-table
                        :data="tableData"
                        stripe
                        border
                        :header-cell-style="tableHeaderColor"
                        style="width: 100%"
                        max-height="250"
                        >
                            <el-table-column
                            prop="date"
                            align="center"
                            label="合同ID"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            align="center"
                            label="合同编号"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            align="center"
                            label="合约人姓名">
                            </el-table-column>
                             <el-table-column
                            prop="addresss"
                            align="center"
                            label="结算方式">
                            </el-table-column>
                             <el-table-column
                            prop="addresss"
                            align="center"
                            label="合约起始时间">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="合约结束时间">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="合约剩余天数">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="录入人姓名">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="录入人工号">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="录入时间">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="合同类型">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="合同状态">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="保证金额">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            label="保证金状态">
                            </el-table-column>
                            <el-table-column
                            prop="addresss"
                            align="center"
                            width="150"
                            label="操作">
                            <template slot-scope="scope">
                                <span @click="handleClick(scope.row)" type="text" size="small">修改</span>
                                <span>/</span>
                                <span type="text" size="small">查看</span>
                            </template>
                            </el-table-column>
                        </el-table>
                        <div class="block" style="margin-top:15px;text-align: right;">
                            <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage3"
                            :page-size="100"
                            layout="prev, pager, next, jumper"
                            :total="1000">
                            </el-pagination>
                        </div>
                    </el-row>
                </div>
            </div>
        </el-row>
    </div>
</template>
<script>

export default {

    data () {

        return {
            form:{
                name:'',
                select:''
            },
            radio4:'客户保证金',
            tableData: [
                {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀'
                
                }, 
                {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀'
                }, 
                {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀'
                }, 
                {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀'
                }
            ],
            currentPage3: 5,
            show:true,
            value1:'',
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value: ''
        }
    },

    mounted () {

        
        
    },

    methods: {
        //改变表头的颜色
        tableHeaderColor({ row, column, rowIndex, columnIndex }){
            if (rowIndex === 0) {
                return 'background-color: #F2F3F7;color: #000;font-weight: 500;'
            }
        },
        //分页
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClick(row){
          console.log(row);
      }
    }
}
</script>
<style>
.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:100%;
}
</style>
